<script>
import {defineComponent} from 'vue'
import FooterModule from "@/components/footerModule.vue";
import instance from "@/api/axios";
import moment from "moment";

export default defineComponent({
    name: "detailPage",
    components: {FooterModule},
    data() {
        return {
            list: [],
            array: [],
            value: 5,
            directory: [],
            likes: 0,
            dislikes: 0,
            action: null,
            moment,
        }
    },
    methods: {
        callback(key) {
            console.log(key);
        },
        like() {
            this.likes = 1;
            this.dislikes = 0;
            this.action = 'liked';
        },
        dislike() {
            this.likes = 0;
            this.dislikes = 1;
            this.action = 'disliked';
        },
    },
    created() {
        console.log(this.$route.query.item)
        instance.get(`http://1.117.81.216:8087/pc/course/detail/${this.$route.query.item.courseId}`, {
            courseId: '103'
        }).then(res => {
            console.log(res)
            this.list = res.data
            this.directory = res.data.sections
        })
    }
})
</script>

<template>
    <div>
        <div class="body">
            <div class="navigation">
                <div class="left-nav">
                    <img src="https://course.myhope365.com/img/logo-text-green.2137bfaa.png" alt=""/>
                    <div class="ul">
                        <ul>
                            <li>首页</li>
                            <li id="course">
                                课程分类 ∨
                                <ul class="course-ul"></ul>
                            </li>
                            <li>教学管理云平台</li>
                        </ul>
                    </div>
                </div>
                <span class="center-span">
      <input placeholder="搜索课程~" type="text" size="large" class="input"/>
      <button>
        <img
                src=""
                alt=""/>
      </button>
    </span>
                <div class="right-login">
                    <div class="shopping-cart">
                        <img
                                src=""
                                alt=""/>
                    </div>
                    <div class="login-box">
                        <div class="btn-log">登录/注册</div>
                    </div>
                </div>
            </div>
        </div>
        <section>
            <div class="firstMain">
                <div class="movieDetail">
                    <a href="#">首页</a>
                    <i>></i>
                    <span>视频详情</span>
                </div>
            </div>
            <div class="secondMain">
                <img
                        :src="`${this.list.bannerFileUrl}`"
                        alt=""
                />
                <div class="titleMain">
                    <div class="ball"></div>
                    <div class="learn">
                        <li>
                            <header id="title">{{ list.courseTitle }}</header>
                        </li>
                        <li id="person">累计{{ list.subSectionNum }}人学习
                            <a-rate v-model="value"/>
                        </li>

                        <li v-if="list.isFree==='1'" class="free">免费</li>

                        <li v-else-if="list.isOpen==='1'" class="mokey">￥{{ list.discountPrice }}

                            <del class="del">{{ list.coursePrice }}</del>
                            <div class="limit">限时钜惠</div>
                        </li>
                    </div>
                    <div class="buyCar">
                        <button class="btn1">立即观看</button>
                        <button class="btn2">加入购物车</button>
                    </div>
                </div>
                <div class="collection">
                    <img src=""
                         alt=""/>
                    <div class="collectionText">收藏</div>
                </div>
            </div>
            <div class="thirstMain">
                <div style="text-align: center">
                    <a-tabs default-active-key="1" @change="callback">
                        <a-tab-pane key="1" tab="课程描述" v-html="list.courseDetail"
                                    style="text-align: left;padding-left: 30px">

                        </a-tab-pane>
                        <a-tab-pane key="2" tab="目录" force-render>
                            <div style="padding: 30px">
                                <div>
                                    <div class="one" v-for="(list) in directory " :key="list.courseId">

                                        <h3>
                                            <div>{{ list.orderBy }}.
                                                <span style="margin-left: 4px;">{{ list.sectionName }}</span>
                                            </div>
                                            <div style="font-size: 22px;color: #24a5fe;">
                                                <span><div style="background-color: rgb(45, 183, 245);"
                                                           class="download">
                                                    <i data-v-3a7480b1="" aria-label="icon: cloud-download"
                                                       class="anticon anticon-cloud-download">
                                                        <svg data-v-3a7480b1="" viewBox="64 64 896 896"
                                                             data-icon="cloud-download"
                                                             width="1em"
                                                             height="1em"
                                                             fill="currentColor"
                                                             aria-hidden="true"
                                                             focusable="false"
                                                             class=""><path
                                                                d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z"></path><path
                                                                d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"></path></svg></i>
                                                下载
                                                </div></span>
                                            </div>
                                        </h3>

                                        <dl>
                                            <dt class="dt" v-for="(list) in list.subSections " :key="list.sectionId">
                                                <div style="float: left">
                                                    <span>{{ list.sectionName }}</span>
                                                </div>
                                                <div style="float: right"><i style="font-size: 16px;
    margin: 0 10px 0 0;" data-v-3a7480b1="" aria-label="icon: play-circle" class="anticon anticon-play-circle">
                                                    <svg data-v-3a7480b1="" viewBox="64 64 896 896"
                                                         data-icon="play-circle" width="1em" height="1em"
                                                         fill="currentColor" aria-hidden="true" focusable="false"
                                                         class="">
                                                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                                        <path d="M719.4 499.1l-296.1-215A15.9 15.9 0 0 0 398 297v430c0 13.1 14.8 20.5 25.3 12.9l296.1-215a15.9 15.9 0 0 0 0-25.8zm-257.6 134V390.9L628.5 512 461.8 633.1z"></path>
                                                    </svg>
                                                </i></div>
                                            </dt>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="3" tab="评论">

                        </a-tab-pane>
                    </a-tabs>
                </div>
            </div>
        </section>
        <footer-module class="footer"></footer-module>
    </div>
</template>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

li {
  list-style: none;
}

.navigation {
  align-items: center;
  display: flex;
  margin: 0 auto;
  width: 1160px;
  height: 80px;
}

.navigation > .left-nav {
  margin-right: 30px;
  margin-left: 40px;
  height: 30px;
  font-weight: 600;
  float: left;
  display: flex;
}

.navigation > .left-nav > img {
  width: 132px;
  height: 40px;
}

.navigation > .left-nav > .ul {
  list-style-type: none;
  height: 30px;
  font-weight: 600;
  float: left;
  margin-left: 30px;
}

.navigation > .left-nav > .ul > ul {
  display: flex;
  width: 320px;

}

.navigation > .left-nav > .ul > ul > li {
  margin-right: 30px;
  list-style: none;

}

.course {
  position: relative;
}

.course-ul {
  color: black;
  display: none;
  position: absolute;
  z-index: 100;
  list-style-type: none;
  background-color: white;
  padding: 3px;
}

.course-li {
  margin-left: 2px;
  height: 30px;
  line-height: 30px;
  z-index: 100;
}

.course-a {
  font-weight: 300;
  font-size: 15px;
  color: rgb(120, 118, 118);
}

.center-span {
  display: flex;
  margin-left: 150px;
}

.center-span > .input {
  outline: none;
  height: 39px;
  border-radius: 20px;
  float: left;
  width: 250px;
  margin-bottom: 0;
  text-align: inherit;
  padding: 6px 11px;
  font-size: 16px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.center-span > button {
  background: transparent;
  border-radius: 20px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 39px;
  width: 50px;
  border: 1px solid #d9d9d9;
  background-color: rgb(0, 178, 120);;
}

.right-login {
  height: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  width: 150px;
}

.right-login > .shopping-cart {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.right-login > .login-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}

.right-login > .login-box > .top-img {
  position: absolute;
  font-size: 10px;
  top: -50px;
  width: 155px;
  height: 41px;
  text-align: center;
  line-height: 30px;
  font-weight: 500;
  background: url();
  background-size: 100%;
  color: #fff;
}

.right-login > .login-box > .btn-log {
  color: rgb(53, 199, 222);
  width: 94px;
  height: 30px;
  background: #fff;
  border-radius: 15px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
}

#title {
  color: black;
  font-size: 30px;
}

.learn > li {
  margin: 10px 0;
}

#person {
  margin-right: 10px;
}

.free {
  color: rgb(0, 207, 140);
  font-size: 26px;
  font-weight: 600;
}

.mokey {
  font-size: 26px;
  font-weight: 600;
  color: #f32425;
}

.del {
  font-weight: 500;
  color: #b7bbc4;
  font-size: 14px;
  text-decoration: line-through;
  margin: 0 10px;
}

.limit {
  width: 63px;
  height: 22px;
  text-align: center;
  font-size: 14px;
  background: linear-gradient(48deg, #fe26b8, #f7283f 23%, #fc3d3f 72%, #ff8d2a) !important;
  border-radius: 3px;
  color: #fff;
}

section {
  background-color: #f4f4f4;
}

.firstMain {
  padding: 20px 0 15px 20px;
  margin: 0 auto;
  width: 1200px;
  height: 164px;
  background: linear-gradient(90deg, #5782f6, #4683ff);
  box-shadow: 0 8px 10px 0 rgba(40, 113, 234, 0.1);
  font-size: 16px;
}

.movieDetail {
  color: #fff;
}

.movieDetail a {
  color: #fff;
}

.secondMain {
  display: flex;
  margin: 0 auto;
  padding: 20px 17px;
  width: 1160px;
  height: 275px;
  margin-top: -100px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 4px;
}

.secondMain > img {
  width: 330px;
  height: 220px;
  border-radius: 12px;
}

.titleMain {
  position: relative;
  width: 650px;
  margin-left: 40px;
}

.title-main {
  position: relative;
  margin: 10px 0;
  font-size: 30px;
  color: #333;
  font-weight: 500;
}

.learn {
  margin: 13px 0;
  font-size: 14px;
  color: #999;
}

.learn img {
  width: 22px;
  height: 22px;
  margin: 0 5px;
  vertical-align: middle;
}

.greenFree {
  margin: 10px 0;
  font-size: 26px;
  font-weight: 600;
  color: rgb(0, 207, 140);
  height: 70px;
}

#freeText0 {
  font-size: 26px;
  font-weight: 600;
  color: #f32425;
}

#delPrice {
  font-weight: 500;
  color: #b7bbc4;
  font-size: 14px;
  text-decoration: line-through;
  margin: 0 10px;
}

.time {
  background: linear-gradient(48deg,
  #fe26b8,
  #f7283f 23%,
  #fc3d3f 72%,
  #ff8d2a) !important;
  border-radius: 3px;
  color: #fff;
  opacity: .85;
  border-color: #ffd591;
  height: 22px;
  margin-right: 8px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  width: 65px;
  margin-top: 25px;
}

.btn1 {
  margin: 10px 0;
  width: 121px;
  height: 40px;
  font-size: 18px;
  border-radius: 24px;
  margin-right: 15px;
  color: #fff;
  background-color: #00cf8c;
  border-color: #00cf8c;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 400;
  text-align: center;
  padding: 0 15px;
}

.btn2 {
  width: 121px;
  height: 40px;
  background: #ffe9e9;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 500;
  color: #f1534b;
  border: none;
}

.ball {
  position: absolute;
  border-radius: 4px;
  top: -22px;
  left: 80px;
  width: 227px;
  height: 78px;
}

.collection {
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
  width: 110px;
  height: 30px;
  font-size: 16px;
  text-align: center;
  color: #999;
}

.thirstMain {
  width: 1160px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 3px;
  background-color: #fff;
}

.thirstMain-top {
  margin: 0 auto;
  width: 1120px;
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid #e8e8e8;
}

.thirstMain-top ul {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 270px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.65);
}

.thirstMain-top ul li {
  padding: 0 10px;
}

.thirstMain-text {
  padding: 30px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

#classifyList {
  display: none;
  position: absolute;
  top: 53px;
  left: 220px;
  background-color: #fff;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  border-radius: 2px;
}

#classifyList li {
  padding: 5px 12px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

#classifyList li a {
  color: rgba(0, 0, 0, 0.65);
}


.one > h3 {
  font-size: 22px;
  padding: 5px 0 5px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.download {
  height: 30px;
  line-height: 27px;
  width: 80px;
  text-align: center;
  display: block;
  font-size: 14px;
  color: #f4f4f4;
}

.anticon anticon-cloud-download {
  display: inline-block;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.dt {
  height: 50px;
  line-height: 30px;
  padding: 10px 20px;
  background: #f2f2f2;
  margin: 10px 0;
}

.dt > span {
  display: inline-block;
  width: 8px;
  line-height: 30px;
}

</style>